// 导入变量（Sass @use 替代 @import）
@use 'variables' as *;

// 基础样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  
  // 4K屏幕适配
  @media (min-width: $breakpoint-xxl) {
    font-size: 18px;
  }
  
  @media (min-width: $breakpoint-4k) {
    font-size: 20px;
  }
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: $font-size-md;
  line-height: $line-height-normal;
  color: $text-primary;
  background-color: $bg-secondary;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// 链接样式
a {
  color: $primary-color;
  text-decoration: none;
  transition: color $transition-fast;
  
  &:hover {
    color: $primary-dark;
  }
}

// 按钮基础样式
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-md;
  border: none;
  border-radius: $border-radius-md;
  font-size: $font-size-md;
  font-weight: $font-weight-medium;
  cursor: pointer;
  transition: all $transition-fast;
  text-decoration: none;
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  // 主要按钮
  &--primary {
    background-color: $primary-color;
    color: white;
    
    &:hover:not(:disabled) {
      background-color: $primary-dark;
      transform: translateY(-1px);
      box-shadow: $shadow-medium;
    }
  }
  
  // 次要按钮
  &--secondary {
    background-color: transparent;
    color: $primary-color;
    border: 2px solid $primary-color;
    
    &:hover:not(:disabled) {
      background-color: $primary-color;
      color: white;
    }
  }
  
  // 大小变体
  &--small {
    padding: $spacing-xs $spacing-sm;
    font-size: $font-size-sm;
  }
  
  &--large {
    padding: $spacing-md $spacing-lg;
    font-size: $font-size-lg;
  }
}

// 卡片样式
.card {
  background-color: $bg-card;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-light;
  overflow: hidden;
  transition: box-shadow $transition-normal;
  
  &:hover {
    box-shadow: $shadow-medium;
  }
  
  &__header {
    padding: $spacing-lg;
    border-bottom: 1px solid $border-light;
  }
  
  &__body {
    padding: $spacing-lg;
  }
  
  &__footer {
    padding: $spacing-lg;
    border-top: 1px solid $border-light;
    background-color: $bg-secondary;
  }
}

// 容器样式
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 $spacing-md;
  
  @media (min-width: $breakpoint-lg) {
    max-width: 1400px;
    padding: 0 $spacing-lg;
  }
  
  @media (min-width: $breakpoint-xxl) {
    max-width: 1800px;
    padding: 0 $spacing-xl;
  }
  
  @media (min-width: $breakpoint-4k) {
    max-width: 2400px;
    padding: 0 $spacing-xxl;
  }
}

// 网格系统
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 (-$spacing-sm);
}

.col {
  flex: 1;
  padding: 0 $spacing-sm;
  
  &-1 { flex: 0 0 8.333333%; }
  &-2 { flex: 0 0 16.666667%; }
  &-3 { flex: 0 0 25%; }
  &-4 { flex: 0 0 33.333333%; }
  &-6 { flex: 0 0 50%; }
  &-8 { flex: 0 0 66.666667%; }
  &-9 { flex: 0 0 75%; }
  &-12 { flex: 0 0 100%; }
}

// 工具类
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }

.mb-sm { margin-bottom: $spacing-sm; }
.mb-md { margin-bottom: $spacing-md; }
.mb-lg { margin-bottom: $spacing-lg; }

.p-sm { padding: $spacing-sm; }
.p-md { padding: $spacing-md; }
.p-lg { padding: $spacing-lg; }

// 响应式隐藏/显示
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

@media (max-width: $breakpoint-sm) {
  .d-sm-none { display: none; }
  .d-sm-block { display: block; }
}

@media (max-width: $breakpoint-md) {
  .d-md-none { display: none; }
  .d-md-block { display: block; }
}